<template>
  <div class="hot_song">
    <div class="logo">
      <img src="../../assets/img/hot_logo.png" alt />
      <br />
      <span>更新日期：6月11日</span>
    </div>
    <div v-for="(item,index) in hot_data" :key="index" @click="toDetail(item,index)">
      <!-- v-if嵌套在v-for下面就可以实现同用 -->
      <div v-if="index<songNum" class="list_song">
        <div class="list_left">{{index+1}}</div>
        <div class="list_right">
          <div class="item_left">
            <p>{{item.name}}</p>
            <p>
              <img src="../../assets/img/sq.png" alt />
              {{item.ar[0].name + item.al.name }}
            </p>
          </div>
          <div class="item_right">
            <i class="iconfont icon-play"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="wz">
      <p @click="change">完整歌单</p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import { api } from "../../assets/http/api";
export default {
  name: "hotSong",
  data() {
    return {
      songNum: 20, //v-if初始值,
      idx:[],
      open: true,
    };
  },
  computed: {
    ...mapGetters(["newurl"]),

    hot_data() {
      let hot_data_one = this.$store.state.hot_data;
      return hot_data_one;
    }
  },
  methods: {
    ...mapMutations(["getUrl","setTime","setMusic"]),

    change() {
      this.songNum = this.$store.state.hot_data.length; //点击之后将v-if初始值改变为整个舒数组的长度
      console.log(this.$store.state.hot_data[0].id);
    },
    //播放
    toDetail(item,index) {
      this.setMusic(true)
      this.idx.push(index);
      if (this.idx.length == 2) {
        if (this.idx[0] != this.idx[1]) {
          this.open = true;
          this.idx = [];
        } else if (this.idx[0] == this.idx[1]) {
          this.open = false;
          this.idx = [];
        }
      }
      // 如果第一次点击和第二次点击的歌曲不同
      if (this.open) {
          // 字段处理
          let newitem = {};
          this.$axios(api.playmusic + item.id).then(res=>{
          newitem.artist = item.ar[0].name;
          newitem.title = item.name;
          newitem.pic = item.al.picUrl;
          newitem.id = item.id;
          newitem.src = res.data.data[0].url
          this.getUrl(newitem);
          })
      }
       else if (!this.open) {
        // 如果第一次点击和第二次点击的歌曲相同
        this.$store.commit("setMusic", false);
          this.$router.push({
            name: "detail"
          });
      }
    }
  }
};
</script>
<style lang="scss">
.hot_song {
  overflow-y: scroll;
  padding-bottom: 66px;
  .logo {
    width: 100vw;
    background-color: #6669e4;
    background-image: linear-gradient(45deg, #64daea, transparent);
    padding-top: 4vh;
    padding-bottom: 4vh;
    padding-left: 6vw;
    margin-bottom: 2vh;
    img {
      width: 30vw;
    }
    span {
      color: white;
    }
  }
  .list_song {
    width: 100vw;
    height: 8vh;
    display: flex;
    justify-content: center;
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4) {
      .list_left {
        color: red;
      }
    }
    .list_left {
      width: 10vw;
      line-height: 8vh;
      text-align: center;
      color: #6f6f70;
    }
    .list_right {
      width: 90vw;
      border-bottom: 1px solid #d3d3d3;
      display: flex;
      .item_left {
        line-height: 4vh;
        width: 70vw;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-clamp: 1;
          &:first-child {
            color: black;
          }
          &:nth-child(2) {
            color: #6f6f70;
            font-size: 13px;
            img {
              width: 4vw;
            }
          }
        }
      }
      .item_right {
        line-height: 8vh;
        margin-left: 10vw;
        i {
          font-size: 40px;
        }
      }
    }
  }
  .wz {
    width: 100vw;
    height: 6vh;

    p {
      line-height: 6vh;
      text-align: center;
    }
  }
}
</style>